@import 'common.scss';

.starName{
	font-size:50px;
	font-weight: bold;
	position: absolute;
	left: 45%;
	top: 30%;
	color:white;
	z-index: 100;
}

.box{
	width: 100vw;
	height: 100vh;
	background-color: black;
	position: relative;
	overflow: hidden;
	
}
.box>div{
	width: 2%;
	height: 100vh;
	float: left;
	position: relative;
}
@function top(){
	@return random($limit: 100);
} 
@function left(){
	@return unquote($string: random($limit: 100) + '%') ; 
}
@function size(){ 
	@return unquote($string: random($limit: 10) + 'px') ;  
}
@mixin starFactury($showNum){
	$top:top();
	border: size() solid white;
	border-radius: 50%;
	width: 0px;
	height:0px;
	position: absolute;
	left: left();
	top: $top + vh;
	animation: starShow#{$showNum} random($limit: 10)+s linear infinite;
	@keyframes starShow#{$showNum} {
		0%{
			top: $top + vh;
		}
		#{$top}%{ 
			top:0vh; 
		}
		#{ceil((100-$top) / 2 )}%{ 
			top:100vh;
		}
		100%{
			top: $top + vh;
		}
		
	}
}
@for $var from 1 through 50 {
	@for $star from 1 through 8 {
		.box>div:nth-of-type(#{$var})>div:nth-of-type(#{$star}){
			@include starFactury($star * 10  + $var) ;
		}
	}
}
